<template>
  <div class="site-copyright">
    <div class="hang">
      <div class="hang-item">
        <div class="label">版本号：</div>
        <div class="value">{{ siteConfig?.version }}</div>
      </div>
      <div class="hang-item">
        <div class="label">邮箱：</div>
        <div class="value">1071401902@qq.com</div>
      </div>
      <div class="hang-item">
        <div class="value">{{ siteConfig?.recordNo }}</div>
      </div>
      <div class="hang-item">
        <div class="value">{{ siteConfig?.copyright }}</div>
      </div>
      <div class="hang-item">
        <div class="value" @click="friendShipVisible = true" style="cursor: pointer;">友情链接</div>
      </div>
    </div>
    <a-modal
      title="友情链接"
      okText="确认"
      :visible="friendShipVisible"
      :width="680"
      :footer="null"
      @cancel="friendShipVisible = false"
    >
      <div class="friend-ship-list">
        <a
          v-for="item in friendLinkList"
          :key="item.id"
          :href="item.link"
          target="_blank"
          class="ship-item">
          <HeadAvatar :width="28" :height="28" :img="item.logo" />
          <p class="nickname">{{ item.name }}</p>
        </a>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SiteCopyRight',
  data () {
    return {
      friendShipVisible: false,
      friendLinkList: []
    }
  },

  created () {
    this.getFriendLinkList()
  },

  methods: {
    async getFriendLinkList () {
      const { data } = await this.$axios.get('/gimishare/api/v1/config/friend-link')
      this.friendLinkList = data
    }
  },
  computed: {
    ...mapState({
      siteConfig: state => state.siteConfig
    })
  }
}
</script>
<style lang="less" scoped>
.site-copyright {
  font-size: 12px;
  color: #999;
  .hang {
    &-item {
      padding: 2px 0;
      display: flex;
      align-items: center;
      .value {
        a {
          color: #999;
        }
      }
    }
  }
}
</style>

<style lang="less">
.friend-ship-list {
  display: flex;
  flex-wrap: wrap;
  .ship-item {
    display: flex;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #f1f1f1;
    align-items: center;
    margin-right: 8px;
    margin-bottom: 8px;
    .nickname {
      margin-left: 8px;
      cursor: pointer;
      color: #000;
    }
  }
}
</style>
